html , [data-theme='light']
	//Color Palette
	--blue: #{$blue-500}
	--blue-l: #{$blue-400}
	--blue-h: #{$blue-50}
	--blue-d: #{$blue-800}
	--purple: #{$purple-500}
	--purple-l: #{$purple-400}
	--purple-h: #{$purple-50}
	--purple-d: #{$purple-800}
	--green: #{$green-500}
	--green-h: #{$green-100}
	--green-l: #{$green-400}
	--green-d: #{$green-800}
	--red: #{$red-500}
	--red-h: #{$red-100}
	--red-l: #{$red-400}
	--red-d: #{$red-800}
	--orange: #{$orange-500}
	--orange-h: #{$orange-100}
	--orange-l: #{$orange-400}
	--orange-d: #{$orange-800}
	--white: #{$white-50}
	--white-h:#{$white-100}
	--white-l:#{$white-0}
	
	--black: #{$black-50}
	--black-l: #{$black-0}
	--black-h: #{$black-100}
	
	--txt-on-p: var(--white)
	--txt-on-red: var(--white)
	--txt-on-green: var(--white)
	--txt-on-purple: var(--white)
	--txt-on-blue: var(--white)
	--txt-on-orange: var(--white)
	--gray: #{$gray-200}
	--gray-l: #{$gray-100}
	--gray-d: #{$gray-400}
	//Key Colors
	--primary: var(--blue)
	--primary-h: var(--blue-h)
	--primary-l: var(--blue-l)
	--primary-d: var(--blue-d)
	--accent: #E3F2FD
	--active: #ECEFF1
	--focus: var(--primary)
	--hover: #ECF4FD
	//Text Color
	--txt: var(--black)
	--txt-l:var(--black-l)
	--txt-h:var(--black-h)
	--txt-r: var(--white)
	//Background Colors
	--bg: #{$gray-50}
	--bg2: #{$gray-100}
	--bg3: #{$gray-200}
	//Border
	--brd: #{$gray-300}

	//Navbar
	--bg-nav: var(--bg)
	--bg-nav-h: var(--bg2)
	--bb-nav: var(--primary)
	//Form 
	--input-bg: var(--bg)
	--input-txt: var(--txt)
	--input-focus: var(--primary-t)
	--input-brd: var(--brd)
	//Buttons 

	--btn-bg: var(--bg)
	--btn-ac: var(--primary)
	--btn-txt: var(--txt)
	--btn-brd: var(--brd)
	--btn-hs: 0
	--btn-f: var(--bg2)
	--btn-bg-h: var(--bg3)
	--btn-sd: 0 1px var(--btn-brd)
	--btn-radius: .5rem

	//Card
	--bg-card: var(--bg)
	//Details
	--bg-details: var(--bg2)
	--bg-details-open: var(--primary)
	--txt-details-open: var(--white)
	//Aside
	--aside-bg: transparent
	--aside-bg-h: var(--bg3)
	--aside-bs: none

	//Tabs
	--bg-tabs: var(--bg)
	--brd-tabs-l: var(--primary)
	--brd-tabs: var(--bg2)
	//table
	--bg-table: var(--bg)
	--fake-brd-table: inset 0 0px 0px 1px var(--bg3)
	--bg-table-hover: var(--bg3)
	--brd-table: var(--bg3)
	--shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px
	--b-shadow: #95abbb
	--radius: .5rem
